<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router';
import {jStorage} from 'jzutil';
import {ref} from 'vue';
const router = useRouter();
const route = useRoute();
const defaultActive = ref('');
defaultActive.value = jStorage.getSession('crtSourcePath') || 'source-swiper';

const navSelect = (index: number, indexPath: string[]) => {
    jStorage.setSession('crtSourcePath', indexPath[0]);
    defaultActive.value = indexPath[0];

    router.replace(`/source/${indexPath[0]}`);
};
</script>
<template>
    <el-container>
        <el-aside width="200px" class="aside">
            <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @select="navSelect">
                <el-menu-item index="source-swiper">
                    <i class="iconfont icon-tubiaozhizuomoban"></i>
                    <template #title>轮播图</template>
                </el-menu-item>
                <el-menu-item index="source-nine">
                    <i class="iconfont icon-jiugongge"></i>
                    <template #title>九宫格</template>
                </el-menu-item>
                <el-menu-item index="source-card">
                    <i class="iconfont icon-kapian"></i>
                    <template #title>卡片</template>
                </el-menu-item>
                <el-menu-item index="source-works">
                    <i class="iconfont icon-zuopin"></i>
                    <template #title>作品集</template>
                </el-menu-item>
                <el-menu-item index="source-level">
                    <i class="iconfont icon-guige"></i>
                    <template #title>规格</template>
                </el-menu-item>
                <el-menu-item index="source-picture">
                    <i class="iconfont icon-tubiaozhizuomoban"></i>
                    <template #title>照片</template>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main> <router-view class="source-subpage"></router-view> </el-main>
    </el-container>
</template>
<style scoped lang="less">
.aside {
    height: 100%;
}
.el-menu {
    height: 100%;
}
.source-subpage {
    width: 100%;
    height: 100%;
}
.iconfont {
    margin: 0 10px;
}
</style>
